revision:
composes two objects together ruled by a certain blending mode.
this is similar to what is known from image editing software when blending two layers. The mode is defined by the "mode" attribute.
attributes: in, in2, mode
codes:
<svg viewBox="0 0 480 200">
<filter id="blending1" x="0" y="0" width="100%" height="100%">
<feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
flood-color="seagreen" flood-opacity="1"/>
<feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
</filter>
<filter id="blending2" x="0" y="0" width="100%" height="100%">
<feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
flood-color="seagreen" flood-opacity="1"/>
<feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge"/>
</filter>
<image xlink:href="../pics/smiley.png" width="200" height="200"
style="filter:url(#blending1);"/>
<image xlink:href="../pics/smiley.png" width="200" height="200"
style="filter:url(#blending2);
transform:translateX(220px);"/>
</svg>
changes colors based on a transformation matrix. Every pixel's color value [R,G,B,A] is matrix multiplied by a 5 by 5 color matrix to create new color [R',G',B',A'].
attributes: in, type, values
codes:
<svg width="100%" height="100%" viewBox="0 0 190 350" preserveAspectRatio=
"xMidYMid meet">
<!-- ref -->
<defs>
<g id="circles">
<circle cx="20" cy="30" r="10" fill="blue" fill-opacity="0.5" />
<circle cx="10" cy="40" r="10" fill="green" fill-opacity="0.5" />
<circle cx="30" cy="40" r="10" fill="red" fill-opacity="0.5" />
</g>
</defs>
<use href="#circles" />
<text x="50" y="50">Reference</text>
<!-- identity matrix -->
<filter id="colorMeTheSame">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
<use href="#circles" transform="translate(0 50)" filter="url(#colorMeTheSame)" />
<text x="50" y="90">Identity matrix</text>
<!-- Combine RGB into green matrix -->
<filter id="colorMeGreen">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
<use href="#circles" transform="translate(0 100)" filter="url(#colorMeGreen)" />
<text x="50" y="140">rgbToGreen</text>
<!-- saturate -->
<filter id="colorMeSaturate">
<feColorMatrix in="SourceGraphic"
type="saturate"
values="0.2" />
</filter>
<use href="#circles" transform="translate(0 150)" filter="url(#colorMeSaturate)" />
<text x="50" y="190">saturate</text>
<!-- hueRotate -->
<filter id="colorMeHueRotate">
<feColorMatrix in="SourceGraphic"
type="hueRotate"
values="180" />
</filter>
<use href="#circles" transform="translate(0 200)" filter="url(#colorMeHueRotate)" />
<text x="50" y="240">hueRotate</text>
<!-- luminanceToAlpha -->
<filter id="colorMeLTA">
<feColorMatrix in="SourceGraphic"
type="luminanceToAlpha" />
</filter>
<use href="#circles" transform="translate(0 250)" filter="url(#colorMeLTA)" />
<text x="50" y="290">luminanceToAlpha</text>
</svg>
performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
the calculations are performed on non-premultiplied color values. The colors are modified by changing each channel (R, G, B, and A) to the result of what the children <feFuncR>, <feFuncB>, <feFuncG>, and <feFuncA> return.
attributes: in
<feFuncA>: defines the transfer function for the alpha component of the input graphic of its parent <feComponentTransfer> element.
<feFuncB>: defines the transfer function for the blue component of the input graphic of its parent <feComponentTransfer> element.
<feFuncG>: defines the transfer function for the green component of the input graphic of its parent
<feFuncR>: defines the transfer function for the red component of the input graphic of its parent <feComponentTransfer> element.
codes:
<svg viewBox="0 0 500 300">
<defs>
<linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0"
x2="100%" y2="0">
<stop offset="0" stop-color="#ff0000"></stop>
<stop offset="0.2" stop-color="#ffff00"></stop>
<stop offset="0.4" stop-color="#00ff00"></stop>
<stop offset="0.6" stop-color="#00ffff"></stop>
<stop offset="0.8" stop-color="#0000ff"></stop>
<stop offset="1" stop-color="#800080"></stop>
</linearGradient>
<filter id="identity" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"></feFuncR>
<feFuncG type="identity"></feFuncG>
<feFuncB type="identity"></feFuncB>
<feFuncA type="identity"></feFuncA>
</feComponentTransfer>
</filter>
<filter id="table" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
<feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
<feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="discrete" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="1 1 0 0"></feFuncG>
<feFuncB type="discrete" tableValues="0 1 1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="linear" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
<feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
<feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="gamma" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
<feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
<feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
</feComponentTransfer>
</filter>
</defs>
<g font-weight="normal">
<text x="0" y="20">Default</text>
<rect class="one" x="0" y="30" width="100%" height="20"></rect>
<text x="0" y="70">Identity</text>
<rect class="one" x="0" y="80" width="100%" height="20" style="filter:url(#identity)"></rect>
<text x="0" y="120">Table lookup</text>
<rect class="one" x="0" y="130" width="100%" height="20" style="filter:url(#table)"></rect>
<text x="0" y="170">Discrete table lookup</text>
<rect class="one" x="0" y="180" width="100%" height="20" style="filter:url(#discrete)"></rect>
<text x="0" y="220">Linear function</text>
<rect class="one" x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect>
<text x="0" y="270">Gamma function</text>
<rect class="one" x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect>
</g>
</svg>
<style>
rect { fill: url(#rainbow);}
</style>
performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, lighter, or arithmetic.
attributes: in, in2, operator (over|in|out|atop|xor|lighter|arithmetic), k1, k2, k3, k4 (values used for calculating the result pixel in arithmetic operator filter primitives)
codes:
<svg style="width:94vw; height:15vw; display: inline;">
<defs>
<filter id="imageOver">
<feImage href="../pics/smiley.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="over"/>
</filter>
<filter id="imageIn">
<feImage href="../pics/smiley.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="in"/>
</filter>
<filter id="imageOut">
<feImage href="../pics/smiley.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="out"/>
</filter>
<filter id="imageAtop">
<feImage href="../pics/smiley.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="atop"/>
</filter>
<filter id="imageXor">
<feImage href="../pics/smiley.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="xor"/>
</filter>
<filter id="imageArithmetic">
<feImage href="../pics/smiley.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="arithmetic" k1="0.1" k2="0.2" k3="0.3" k4="0.4" />
</filter>
<filter id="imageLighter">
<feImage href="../pics/smiley.png" x="10px" y="10px" width="160px" />
<feComposite in2="SourceGraphic" operator="lighter"/>
</filter>
</defs>
<g transform="translate(0,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageOver)"/>
<text x="80" y="-5">over</text>
</g>
<g transform="translate(200,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageIn)"/>
<text x="80" y="-5">in</text>
</g>
<g transform="translate(400,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageOut)"/>
<text x="80" y="-5">out</text>
</g>
<g transform="translate(600,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageAtop)"/>
<text x="80" y="-5">atop</text>
</g>
<g transform="translate(800,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageXor)"/>
<text x="80" y="-5">xor</text>
</g>
<g transform="translate(1000,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageArithmetic)"/>
<text x="70" y="-5">arithmetic</text>
</g>
<g transform="translate(1200,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageLighter)"/>
<text x="80" y="-5">lighter</text>
</g>
</svg>
applies a matrix convolution filter effect.
a convolution combines pixels in the input image with neighboring pixels to produce a resulting image.
A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
a matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value.
each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels.
attributes: in, order, kernelMatrix, divisor, bias, targetX, targetY, edgeMode, kernelUnitLength, preserveAlpha
codes:
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<filter id="emboss">
<feConvolveMatrix
kernelMatrix="3 0 0
0 0 0
0 0 -3"/>
</filter>
</defs>
<image href="shape.svg" x="0" y="0"
height="200" width="200" style="filter:url(#emboss);" />
</svg>
lights an image using the alpha channel as a bump map. The resulting image, which is an RGBA opaque image, depends on the light color, light position and surface geometry of the input bump map.
the light map produced by this filter primitive can be combined with a texture image using the multiply term of the arithmetic operator of the <feComposite> filter primitive.
Multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.
attributes:in, surfaceScale, diffuseConstant, kernelUnitLength
codes:
<svg width="800" height="140">
<!-- No light is applied -->
<text text-anchor="middle" x="60" y="22">No Light</text>
<circle cx="60" cy="80" r="50" fill="green" />
<!-- the light source is a fePointLight element -->
<text text-anchor="middle" x="300" y="22">fePointLight</text>
<filter id="lightMe1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<fePointLight x="150" y="60" z="20" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>
<circle cx="300" cy="80" r="50" fill="green"
filter="url(#lightMe1)" />
<!-- the light source is a feDistantLight element -->
<text text-anchor="middle" x="500" y="22">feDistantLight</text>
<filter id="lightMe2">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feDistantLight azimuth="240" elevation="20"/>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>
<circle cx="500" cy="80" r="50" fill="green"
filter="url(#lightMe2)" />
<!-- the light source is a feSpotLight source -->
<text text-anchor="middle" x="700" y="22">feSpotLight</text>
<filter id="lightMe3">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feSpotLight x="360" y="5" z="30" limitingConeAngle="20" pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>
<circle cx="700" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
</svg>
uses the pixel values from the image from "in2" to spatially displace the image from "in".
attributes: in, in2, scale, xChannelSelector, yChannelSelector
codes:
<svg width="200" height="200" viewBox="0 0 220 220">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"
result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>
<circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)"/>
</svg>
creates a drop shadow of the input image. It can only be used inside a <filter> element.
attributes: dx, dy, stdDeviation
codes:
<svg viewBox="0 0 30 10" >
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan"/>
</filter>
<filter id="shadow3">
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" flood-color="pink"
flood-opacity="0.5"/>
</filter>
</defs>
<circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/>
<circle cx="15" cy="50%" r="4" style="fill:green; filter:url(#shadow2);"/>
<circle cx="25" cy="50%" r="4" style="fill:burlywood; filter:url(#shadow3);"/>
</svg>
fills the filter subregion with the color and opacity defined by flood-color and flood-opacity
attributes: flood-color, flood-capacity
codes:
<svg width="200" height="200">
<defs>
<filter id="floodFilter" filterUnits="userSpaceOnUse">
<feFlood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/>
</filter>
</defs>
<use style="filter: url(#floodFilter);"/>
</svg>
blurs the input image by the amount specified in stdDeviation, which defines the bell-curve.
attributes: in, stdDeviation, edgeMode
codes:
<svg width="230" height="120">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.)
attributes: preserveAspectRatio, xlink:href
example
codes:
<svg viewBox="0 0 200 200">
<defs>
<filter id="image">
<feImage href="smiley.png"/>
</filter>
</defs>
<rect x="10%" y="10%" width="60%" height="60%" style="filter:url(#image);"/>
</svg>
allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result attribute and then accessing it in a <feMergeNode> child.
attributes: no specific attributes
codes:
<svg width="200" height="200">
<filter id="feOffset" x="-40" y="-20" width="100" height="200">
<feOffset in="SourceGraphic" dx="60" dy="60" />
<feGaussianBlur stdDeviation="5" result="blur2" />
<feMerge>
<feMergeNode in="blur2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feOffset);" />
</svg>
takes the result of another filter to be processed by its parent <feMerge>.
attributes: in
codes:
<svg width="200" height="200">
<filter id="feOffset" x="-40" y="-20" width="100" height="200">
<feOffset in="SourceGraphic" dx="60" dy="60" />
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" />
<feMerge>
<feMergeNode in="blur2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feOffset);" />
<rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" />
</svg>
is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.
attributes: in, operator, radius
codes:
<svg width="300" height="180">
<filter id="erode">
<feMorphology operator="erode" radius="0"/>
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="1"/>
</filter>
<text id="normal" y="2vw">Normal text</text>
<text id="thin" y="5vw">Thinned text</text>
<text id="thick" y="9vw">Fattened text</text>
</svg>
<style>
#normal {font-family: Arial, Helvetica, sans-serif;font-size: 3vw;}
#thin {filter: url(#erode);}
#thick {filter: url(#dilate);}
</style>
allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes.
attributes: in, dx, dy
codes:
<svg width="200" height="200">
<defs>
<filter id="offset" width="180" height="180">
<feOffset in="SourceGraphic" dx="60" dy="60" />
</filter>
</defs>
<rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/>
<rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/>
</svg>
lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color.
the lighting calculation follows the standard specular component of the Phong lighting model.
the resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added.
the filter primitive assumes that the viewer is at infinity in the z direction.
this filter primitive produces an image which contains the specular reflection part of the lighting calculation.
such a map is intended to be combined with a texture using the add term of the arithmetic <feComposite> method.
multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.
attributes: in, surfaceScale, specularConstant, specularExponent, kernelUnitLength
codes:
<svg height="200" width="200" viewBox="0 0 220 220">
<filter id ="filter_a">
<feSpecularLighting result="specOut" specularExponent="20" lighting-color="#bbbbbb">
<fePointLight x="50" y="75" z="200"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
<circle cx="110" cy="110" r="100" style="filter:url(#filter_a)"/>
</svg>
allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern>.
attributes: in
codes:
<svg width="200" height="200">
<defs>
<filter id="tile" x="0" y="0" width="100%" height="100%">
<feTile in="SourceGraphic" x="50" y="50"width="100" height="100" /><feTile/>
</filter>
</defs>
<image href="smiley.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);"/>
</svg>
creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.
attributes: baseFrequency, numOctaves, seed, stitchTiles, type
codes:
<svg width="200" height="200" viewBox="0 0 220 220">
<filter id="displacementFilter_1">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter_1)"/>
</svg>